<template>
  <div class="main">
    <h2 class="user-title"><span>关注的店铺</span></h2>
    <div class="list-wrapper">
       <ul class="store-list">
        <li class="store-item" v-for="(store, index) in storeList" :key="index">
          <div class="store-box clearfix">
            <div class="logo"><img :src="store.storeLogo" width="100" height="100"></div>
            <div class="info">
              <p class="store-name">{{store.storeName}}</p>
              <p class="store-local">所在地：{{store.areaName}}</p>
              <div class="btn-group">
                <el-button size="mini" icon="el-icon-plus" v-if="store.isStore == 0" @click="follow(store)">关注</el-button>
                <el-button size="mini" v-if="store.isStore == 1" @click="unfollow(store)">取消关注</el-button>
                <el-button type="primary" size="mini" @click="goToStore(store.id)">进入店铺</el-button>
              </div>
            </div>
          </div>
          <ul class="goods-list row">
            <li class="goods-item col-3" v-for="(item, index1) in store.productList" :key="index1">
              <router-link class="product-box" :to="'/goods/goodsDetail?productId=' + item.productId">
                <div class="product-img">
                  <img :src="item.productCover" class="product-img" width="100%">
                </div>
                <div class="product-info">
                  <div class="sell">
                    <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                    <span class="sell-price">
                      <em>¥</em>
                      <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                      <span v-else>?</span>
                      <i class="sell-type">/{{item.attributeName}}</i>
                    </span>
                    <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
                  </div>
                  <div class="name">{{item.productName}}</div>
                    <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
                  <div class="discounts" v-if="item.activityList">
                    <div class="tag-group" v-if="item.activityList.isMore === '1'">
                      <span class="tag" v-for="(tag, index1) in item.activityList.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                    </div>
                    <div class="tag-group" v-else>
                      <span class="tag">{{item.activityList.activityName}}</span>
                    </div>
                  </div>
                  <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
                </div>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <v-pagination v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
  </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
import { getAreaName } from '@/util/getAreaName'
import {FavourableActivityTypes} from '@/util/enums'
export default {
  data () {
    return {
      FavourableActivityTypes: FavourableActivityTypes,
      storeList: [],
      page: 1,
      pageSize: 15,
      total: 0,
      loading: false
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.getStoreList()
  },
  methods: {
    // 搜索店铺列表
    getStoreList () {
      return new Promise(resolve => {
        let parma = {
          page: this.page,
          pageSize: this.pageSize
        }
        this.$http.post(this.$api + '/pc/product/getStoreProducts', parma).then(res => {
          if (res.responseCode === '0000') {
            res.data.list.forEach(item => {
              // 设置发货地址
              let area = []
              if (item.province) {
                area.push(item.province + '')
                if (item.city) {
                  area.push(item.city + '')
                }
              }
              item.areaName = getAreaName(area)
            })
            this.storeList = res.data.list
            this.total = res.data.total
          }
        })
        return resolve()
      })
    },
    // 关注店铺
    follow (store) {
      if (!this.loading) {
        this.loading = true
        this.$http.post(this.$api + '/pc/product/addOrDeleteStore', {
          storeId: store.id,
          type: 1 // 判断是否已关注，Type枚举：{1: 关注； 2: 取消关注}
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: 1000,
              message: res.responseMsg,
              onClose: () => {
                this.getStoreList().then(() => {
                  this.loading = false
                })
              }
            })
          } else if (res.responseCode === 1004) {
            this.$message.error({
              duration: 1000,
              message: '请先登录后在关注该店铺',
              onClose: () => {
                this.$router.push('/login')
              }
            })
          } else {
            this.$message.error({
              duration: 1000,
              message: res.responseMsg
            })
            this.loading = false
          }
        }).catch(err => {
          console.error(err)
          this.loading = false
        })
      } else {
        return false
      }
    },
    // 取消关注店铺
    unfollow (store) {
      if (!this.loading) {
        this.loading = true
        this.$http.post(this.$api + '/pc/product/addOrDeleteStore', {
          storeId: store.id,
          type: 2 // 判断是否已关注，Type枚举：{1: 关注； 2: 取消关注}
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: 1000,
              message: res.responseMsg,
              onClose: () => {
                this.getStoreList().then(() => {
                  this.loading = false
                })
              }
            })
          } else {
            this.$message.error({
              duration: 1000,
              message: res.responseMsg
            })
            this.loading = false
          }
        }).catch(err => {
          console.error(err)
          this.loading = false
        })
      } else {
        return false
      }
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.getStoreList()
    },
    // 进入店铺
    goToStore (storeId) {
      const {href} = this.$router.resolve({
        name: '店铺详情',
        query: {
          storeId: storeId
        }
      })
      window.open(href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.user-title ::after {
  width:81px;
}
.list-wrapper{
  margin-top: 15px;
  .store-list{
    padding: 15px 0;
    .store-item{
      margin-bottom: 25px;
      border-bottom: 3px solid $border_color;
      background: transparent;
      .store-box{
        margin: 0;
        padding: 0 0 20px;
        border: 0;
        .logo{
          margin-right: 18px;
          border: 1px solid $border_color;
        }
        .info{
          padding-top: 10px;
        }
      }
    }
  }
}
.list-wrapper .goods-list{margin: 0;}
.list-wrapper .goods-list .goods-item{
  padding: 0;
  height: 353px;
  width: 200px;
  border: 1px solid $border_color;
  margin-right: 9px;
  .sell-type{
    font-size: $fz_12;
  }
  .orignal-price{
    font-size: $fz_12;
  }
}
.list-wrapper .goods-list .goods-item .product-box .product-img{height: 200px;}
.list-wrapper .goods-list .goods-item .product-box .product-info{
  padding: 0 5px 12px;
  .sell{
    white-space:nowrap;
  }
}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .discount{font-size: $fz_12;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .sell-price{font-size: $fz_14;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .sell-price .sell-type{
  font-size: $fz_12;
}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .orignal-price{font-size: $fz_12;}
.list-wrapper .goods-list .goods-item .product-box .product-info .store {overflow: hidden;}
.list-wrapper .goods-list .goods-item .product-box .product-info .sell .orignal-price{padding-top: 3px;}
.list-wrapper .goods-list .goods-item .product-box .product-info .name {font-size: 14px; line-height: 16px;height: 32px;}
.list-wrapper .goods-list .goods-item .product-box .product-info .name{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: inherit;
}
</style>
